<template>
  <div class="chart">
    <el-card>
      <ul class="list">
        <li>
          <div class="itemContent color1">{{ info.increment_users }}</div>
          <p>今日新增用户</p>
        </li>
        <li>
          <div class="itemContent color1">{{ info.total_users }}</div>
          <p>总用户量</p>
        </li>
        <li>
          <div class="itemContent color2">{{ info.increment_questions }}</div>
          <p>新增试题</p>
        </li>
        <li>
          <div class="itemContent color2">{{ info.total_questions }}</div>
          <p>总试题量</p>
        </li>
        <li>
          <div class="itemContent color3">{{ info.total_done_questions }}</div>
          <p>总刷题量</p>
        </li>
        <li>
          <div class="itemContent color3">{{ info.personal_questions }}</div>
          <p>人均刷题量</p>
        </li>
      </ul>
    </el-card>
    <el-card style="margin-top:20px;">
      <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div ref="echartsRef" class="echarts"></div>
    </el-card>
  </div>
</template>

<script lang="ts">
import echarts from 'echarts'
import { getTitleInfo, getStatistics } from '@/api/chart'
import { Vue, Component } from 'vue-property-decorator'
@Component({
  name: 'Chart'
})
export default class Chart extends Vue {
  declare info: any
  declare statistics: any

  data() {
    return {
      info: {},
      statistics: {}
    }
  }
  created() {
    this.getTitleInfoData()
  }
  mounted() {
    this.getStatisticsData()
  }
  async getTitleInfoData() {
    const res = await getTitleInfo()

    if (res.data.code === 200) {
      this.info = res.data.data
    }
  }
  async getStatisticsData() {
    const res = await getStatistics()

    if (res.data.code === 200) {
      this.statistics = res.data.data

      this.$nextTick(() => {
        this.initEcharts()
      })
    }
  }
  initEcharts() {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(this.$refs.echartsRef)

    const legendData = this.statistics.map((item: any) => item.name)

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: '整体数据',
        textStyle: {
          color: '#666666',
          fontFamily: 'MicrosoftYaHei',
          fontWeight: 'lighter',
          fontSize: 15
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        right: 60,
        data: legendData
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.statistics
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
.chart {
  .list {
    //弹性例子布局
    display: flex;
    //主轴分布
    justify-content: space-around;
    //侧轴分布
    align-items: center;
    //文本居中
    text-align: center;
    //颜色处理
    .color1 {
      border: 3px solid #0086fa;
      color: #0086fa;
    }
    .color2 {
      border: 3px solid #f76137;
      color: #f76137;
    }
    .color3 {
      border: 3px solid #55cd78;
      color: #55cd78;
    }
    //画圈圈
    .itemContent {
      border-radius: 50%;
      width: 99px;
      height: 99px;
      line-height: 99px;
    }
  }
  .echarts {
    height: 500px;
  }
}
</style>
